<template>
  <div class="leftContainer">
    <div id="leftCharts"></div>
    <!--环形图中间文字-->
    <span>按性别</span>
  </div>
</template>

<script>
export default {
  name: "mainTopChild",
  data() {
    return {
      option: {
        // toolbox: {
        //   // show: true,
        //   feature: {
        //     // mark: { show: true },
        //   },
        // },
        textStyle: {
          color: "#fff",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [55, 85],
            color: ["#5770ef", "#71f4fe"],
            center: ["50%", "50%"],
            itemStyle: {
              borderRadius: 0,
            },
            data: [
              { value: 50, name: "男" },
              { value: 50, name: "女" },
            ],
          },
        ],
      },
      timer: null,
    };
  },
  mounted() {
    this.initMyEchart();
    //this.changePieSelectedData();
  },
  methods: {
    initMyEchart() {
      var myChart = this.$echarts.init(document.getElementById("leftCharts"));
      myChart.setOption(this.option);
    },
    //使饼图动态切换
    changePieSelectedData() {
      let index = 0;
      let length = this.option.series[0].data.length; //2
      if(this.timer) {
        clearInterval(this.timer);
      }
      this.timer = null;
      setInterval(() => {
        console.log("定时器执行了", index);
        if (index >= length) {
          index = 0;
          this.option.series[0].data[length - 1].selected = false
        }
        if (index !== 0) {
          this.$forceUpdate();
          this.option.series[0].data[index - 1].selected = false;
        }
        
        this.option.series[0].data[index].selected = true;
        
        index++;
      }, 2000);
      setInterval(()=>{
        var myChart = this.$echarts.init(
          document.getElementById("leftCharts")
        );
        myChart.setOption(this.option);
      },2000)
    },
  },
};
</script>

<style scoped lang="less">
  .leftContainer{
    width: 49%;
    height: 250px;
    position: relative;
    #leftCharts{
      width: 100%;
      height: 250px;
    }
    span{
        position: absolute;
        left:50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 15px;
        color: #ffffff;
        font-weight: 650;
      }
  }
</style>